<template>
  <el-container>
    <!--头部-->
    <el-header>
      <i class="el-icon-user-solid"></i>
      <span style="font-size: 20px;font-weight: bold; position: absolute; top: 0; left: 0;padding-left: 20px;">
        基于大数据的教学质量督导决策支持系统
      </span>
    </el-header>
    <!--中间-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="250px" style="margin: 0;padding: 0">
        <div class="picture">
          <a href="#">图片</a><br>
          <span>{{ this.$store.state.name }}</span>
        </div>
        <el-menu :default-openeds="['1', '3']" style="margin: 0;padding: 0">
          <router-link to="/lesson">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-data-board"></i>课程
              </template>
            </el-submenu>
          </router-link>

          <router-link to="/class">
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-s-flag"></i>班级</template>
            </el-submenu>
          </router-link>

          <router-link to="/message">
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-s-custom"></i>关于我的</template>
            </el-submenu>
          </router-link>

          <div class="foot">
            <el-button type="text" @click="goLogin"><i class="el-icon-arrow-left"></i>返回</el-button>
            <el-button type="text" @click="goLogin"><i class="el-icon-switch-button"></i>退出</el-button>
            <el-button type="text" @click="goLogin"><i class="el-icon-top-left"></i>切换账号</el-button>
          </div>
        </el-menu>

      </el-aside>
      <!--主体-->
      <router-view></router-view>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    const item = {
      classid: '2221',
      classname: 'python开发',
      discribe: 'web开发全套课程'
    }
    return {
      tableData: Array(item)
    }
  },
  methods: {
    setCookie (cname, value, expire) {
      const date = new Date()
      date.setSeconds(date.getSeconds() + expire)
      document.cookie = cname + '=' + escape(value) + '; expires=' + date.toGMTString()
      console.log(document.cookie)
    },
    delCookie (cname) {
      this.setCookie(cname, '', -1)
    },
    goLogin () {
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState(['q`username'])
  }
}
</script>

<style>
  body {
    margin: 0;
    padding: 0;
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    text-align: right;
  }

  .el-aside {
    background-color: white;
    color: #333;
    text-align: center;
    line-height: 250px;
    height: calc(100vh-100px);
  }

  .el-main {
    height: calc(100vh-100px);
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .contain {
    display: flex;
  }

  .foot {
    text-align: center;
  }

  .picture {
    height: 300px;
    line-height: 150px;
  }
</style>
